<template>
    <div class="box">
        <button class="backBtn" @click="back">返回上级</button>
        <div
            id="mapChart"
            :style="{height: data.options.height+'px',width: data.options.width+'px'}"
            class="chart"
        ></div>
    </div>
</template>

<script>
import cityMap from "@/mapjs/china-main-city-map.js";
import echarts from "echarts";
import axios from "axios";
//中国地图（第一级地图）的ID、Name、Json数据
var chinaId = 100000;
var chinaName = "china";
var chinaJson = null;

//记录父级ID、Name
var mapStack = [];
var parentId = null;
var parentName = null;

//Echarts地图全局变量，主要是在返回上级地图的方法中会用到
var myChart = null;
var optionsMap = {
    geo: {
        itemStyle: {
            normal: {
                borderColor: '#404a59',
                borderWidth: 1,
                areaColor: '#323c48',
            },
            emphasis: {
                areaColor: '#2a333d',
                borderWidth: 0,
                color: '#f1f1f1'
            }
        }
    },
}
var data = [
    {name:"北京",value:199},
    {name:"河北",value:102},
    {name:"山西",value:81},
    {name:"内蒙古",value:47},
    {name:"吉林",value:82},
    {name:"黑龙江",value:123},
    {name:"上海",value:24},
    {name:"江苏",value:92},
    {name:"浙江",value:114},
    {name:"安徽",value:109},
    {name:"福建",value:116},
    {name:"江西",value:91},
    {name:"山东",value:119},
    {name:"河南",value:137},
    {name:"湖北",value:116},
    {name:"湖南",value:114},
    {name:"重庆",value:91},
    {name:"四川",value:125},
    {name:"贵州",value:62},
    {name:"云南",value:83},
    {name:"西藏",value:9},
    {name:"陕西",value:80},
    {name:"甘肃",value:56},
    {name:"青海",value:10},
    {name:"宁夏",value:18},
    {name:"新疆",value:180},
    {name:"广东",value:123},
    {name:"广西",value:59},
    {name:"海南",value:14},
];
var geoCoordMap = {};
var mapFeatures = [];
var convertData = function(geoCoordMap,data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
            res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value)
            });
        }
    }
    return res;
};
export default {
    name: "chinaMap",
    props: {
        data: {
            type: Object
        },
        msg: {
            type: String
        }
    },
    created() {
        this.data.options = { ...this.data.options, ...optionsMap };
    },
    mounted: function() {
        this.mapChart("mapChart");
    },
    methods: {
        /**
         * 返回上一级地图
         */
        back() {
            const _this = this
            if (mapStack.length != 0) {
                //如果有上级目录则执行
                var map = mapStack.pop();
                axios
                .get("./static/json/map/" + map.mapId + ".json", {})
                .then(response => {
                    const mapJson = response.data;
                    _this.registerAndsetOption(myChart,map.mapId,map.mapName,mapJson,false);
                    parentId = map.mapId;
                    parentName = map.mapName;
                });
            }
        },
        /**
         * Echarts地图
         */

        mapChart(divid) {
            const _this = this
            axios.get("./static/json/map/" + chinaId + ".json", {}).then(response => {
                const mapJson = response.data;
                chinaJson = mapJson;
                geoCoordMap = {};
                mapFeatures = mapJson.features;
                mapFeatures.forEach(function(v) {
                    // 地区名称
                    var name = v.properties.name;
                    // 地区经纬度
                    geoCoordMap[name] = v.properties.cp;

                });
                myChart = echarts.init(document.getElementById(divid));
                _this.registerAndsetOption(myChart, chinaId, chinaName, mapJson, false);
                parentId = chinaId;
                parentName = "china";
                myChart.on("click", function(param) {
                    var cityId = cityMap[param.name];
                    if (cityId) {
                        //代表有下级地图
                        axios
                        .get("./static/json/map/" + cityId + ".json", {})
                        .then(response => {
                            const mapJson = response.data;
                            _this.registerAndsetOption(myChart,cityId, param.name, mapJson,true);
                        });
                    } else {
                        //没有下级地图，回到一级中国地图，并将mapStack清空
                        _this.registerAndsetOption(myChart, chinaId, chinaName, chinaJson, false);
                        mapStack = [];
                        parentId = chinaId;
                        parentName = chinaName;
                    }
                });
            });
        },
        registerAndsetOption(myChart, id, name, mapJson, flag) {
            geoCoordMap = {};
            mapFeatures = mapJson.features;
            mapFeatures.forEach(function(v) {
                // 地区名称
                var name = v.properties.name;
                // 地区经纬度
                geoCoordMap[name] = v.properties.cp;

            });
            echarts.registerMap(name, mapJson);
            myChart.setOption({
                geo: {
                    show: false,
                    map: 'china',
                    label: {
                        normal: {
                            show: false
                        },
                        emphasis: {
                            show: false,
                        }
                    },
                    roam: true,
                    itemStyle: {
                        normal: {
                            areaColor: '#023677',
                            borderColor: '#1180c7',
                        },
                        emphasis: {
                            areaColor: '#4499d0',
                        }
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}'
                },
                series: [
                    {
                        name: '散点',
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        data: convertData(geoCoordMap,data),
                        symbolSize: function(val) {
                            return val[2] / 10;
                        },
                        label: {
                            normal: {
                                formatter: '{b}',
                                position: 'right',
                                show: true
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#fff'
                            }
                        }
                    },
                    {
                        name: "",
                        type: "map",
                        mapType: name,
                        label: {
                            normal: {
                                show: false,
                                color: '#f1f1f1',
                                position: 'insideRight',
                            },
                            emphasis: {
                                show: false,
                                color: 'yellow'
                            }
                        },
                        ...this.data.options.geo,
                        data: initMapData(mapJson),
                    },
                    {
                        name: '点',
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        label: {
                            normal: {
                                formatter: '{b}',
                                position: 'top',
                                show: true,
                            }
                        },
                        zlevel: 1,
                    },
                    {
                        name: 'Top 5',
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        data: convertData(geoCoordMap,data.sort(function(a, b) {
                            return b.value - a.value;
                        }).slice(0, 10)),
                        symbolSize: function(val) {
                            return val[2] / 12;
                        },
                        showEffectOn: 'render',
                        rippleEffect: {
                            brushType: 'stroke'
                        },
                        hoverAnimation: true,
                        label: {
                            normal: {
                                formatter: '{b}',
                                position: 'right',
                                show: true
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: 'yellow',
                                shadowBlur: 10,
                                shadowColor: 'yellow'
                            }
                        },
                        zlevel: 1
                    },
                ]
            });

            if (flag) {
                //往mapStack里添加parentId，parentName,返回上一级使用
                mapStack.push({
                    mapId: parentId,
                    mapName: parentName
                });
                parentId = id;
                parentName = name;
            }
        }
    }
};
/**
 *
 * @param {*} myChart
 * @param {*} id        省市县Id
 * @param {*} name      省市县名称
 * @param {*} mapJson   地图Json数据
 * @param {*} flag      是否往mapStack里添加parentId，parentName
 */
function initMapData(mapJson) {
    var mapData = [];
    for (var i = 0; i < mapJson.features.length; i++) {
        mapData.push({
            name: mapJson.features[i].properties.name
        });
    }
    return mapData;
}
</script>

<style scoped>
.backBtn {
  position: absolute;
  top: 0;
  background-color: #00c298;
  border: 0;
  color: #fff;
  height: 30px;
  line-height: 30px;
  font-size: 16px;
  cursor: pointer;
  z-index: 99;
}
</style>
